<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML引用VUE3 + ant-design-vue 4.x</title>
    <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    <link  type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet" >
    <script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
</head>
<body>
<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">展示文档样例。</p>
	<a-typography>
		<a-typography-title>介绍</a-typography-title>
		<a-typography-paragraph>
			蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
			同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
		</a-typography-paragraph>
		<a-typography-paragraph>
			经过大量的项目实践和总结，以设计语言Ant Design为背景应用程序，由Ant UED团队进行改进，该团队旨在
			<a-typography-text strong>
				统一内部后台项目的用户界面规范，降低不必要的设计成本差异与实施，解放设计资源前端开发。
			</a-typography-text>
		</a-typography-paragraph>
		
		<a-typography-title :level="2">指导方针和资源</a-typography-title>
		<a-typography-paragraph>
			我们提供一系列的设计原则、实用模式和高品质的设计资源
			（ <a-typography-text code>Sketch</a-typography-text> 和 <a-typography-text code>Axure</a-typography-text> ），帮助人们漂亮高效地创建产品原型。
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<ul>
				<li>
					<a-typography-link href="https://www.baidu.com/">百度一下</a-typography-link>
				</li>
			</ul>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			按
			<a-typography-text keyboard>Esc</a-typography-text>
			退出...
		</a-typography-paragraph>
	
		<a-divider></a-divider>
	
		<a-typography-title>介绍</a-typography-title>
		<a-typography-paragraph>
			蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
			同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
		</a-typography-paragraph>
		<a-typography-paragraph>
			随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，
			逐步打磨出一个服务于企业级产品的设计体系Ant Design。基于
			<a-typography-text mark>『确定』和『自然』</a-typography-text>
			的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
			<a-typography-text strong>更好的用户体验</a-typography-text> 。
		</a-typography-paragraph>
		
		<a-typography-title :level="2">设计资源</a-typography-title>
		<a-typography-paragraph>
			我们提供完善的设计原则、最佳实践和设计资源文件
			（ <a-typography-text code>Sketch</a-typography-text> 和 <a-typography-text code>Axure</a-typography-text> ），
			来帮助业务快速设计出高质量的产品原型。
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<ul>
				<li>
					<a-typography-link href="https://www.baidu.com/">设计资源</a-typography-link>
				</li>
			</ul>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<blockquote>{{ blockContent }}</blockquote>
			<pre>{{ blockContent }}</pre>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			按
			<a-typography-text keyboard>Esc</a-typography-text>
			键退出阅读……
		</a-typography-paragraph>
	</a-typography>
	
	
	<a-divider class="a-divi" orientation="left">省略号</a-divider><!-- =============================================================== -->
	<p class="desc">多行文本省略。你可以通过 tooltip 属性配置省略展示内容，大量文本时推荐优先使用 expandable。</p>
	<a-switch v-model:checked="ellipsis" ></a-switch>
	<a-typography-paragraph :ellipsis="ellipsis" content="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team."></a-typography-paragraph>
	
	<a-typography-paragraph :ellipsis="ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false" 
		content="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team."></a-typography-paragraph>
	
	<hr> 
	<a-typography-text :style="ellipsis ? { width: '100px' } : {}" :ellipsis="ellipsis ? { tooltip: 'I am ellipsis now!' } : false"
		content="Ant Design, a design language for background applications, is refined by Ant UED Team."></a-typography-text>
	<br>
	<a-typography-text :style="ellipsis ? { width: '100px' } : {}" :ellipsis="ret_ellipsis"
		content="Ant Design, a design language for background applications, is refined by Ant UED Team."></a-typography-text>
	
	<a-divider class="a-divi" orientation="left">可交互</a-divider><!-- =============================================================== -->
	<p class="desc">提供可编辑和可复制等额外的交互能力。</p>
	<a-typography-paragraph v-model:content="editableStr" :editable="ret_editable"></a-typography-paragraph>
	<p>不知道为什么，这里的插槽没有生效</p>
	<a-typography-paragraph v-model:content="customIconStr" editable>
		<template #editableIcon>
			<edit class="aut-icon"></edit>
		</template>
		<template #editableTooltip>click to edit text</template>
	</a-typography-paragraph>
	
	Trigger edit with:&nbsp;&nbsp;
	<a-radio-group v-model:value="stateToRadio" @change="radioToState()">
		<a-radio value="icon">icon</a-radio>
		<a-radio value="text">text</a-radio>
		<a-radio value="both">both</a-radio>
	</a-radio-group>
	<a-typography-paragraph v-model:content="clickTriggerStr" :editable="{ triggerType: chooseTrigger }">
		<template #editableTooltip>click to edit text</template>
	</a-typography-paragraph>
	
	<a-typography-paragraph v-model:content="customEnterIconStr" editable>
		<template #editableIcon>
			<HighlightOutlined />
		</template>
		<template #editableTooltip>click to edit text</template>
		<template #editableEnterIcon="{ className }">
			<CheckOutlined :class="className" />
		</template>
	</a-typography-paragraph>
	<!-- 
	<a-typography-paragraph v-model:content="noEnterIconStr" editable>
		<template #editableIcon>
			<HighlightOutlined />
		</template>
		<template #editableTooltip>click to edit text</template>
		<template #editableEnterIcon>{{ null }}</template>
	</a-typography-paragraph>
	<a-typography-paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }"></a-typography-paragraph>
	<a-typography-paragraph v-model:content="lengthLimitedStr"
		:editable="{ maxlength: 50, autoSize: { maxRows: 5, minRows: 3 } }"></a-typography-paragraph>
	
	<a-typography-paragraph copyable>This is a copyable text.</a-typography-paragraph>
	<a-typography-paragraph :copyable="{ text: 'Hello, Ant Design!' }">
		Replace copy text.
	</a-typography-paragraph>
	<a-typography-paragraph copyable content="Custom Copy icon and replace tooltips text.">
		<template #copyableIcon="{ copied }">
			<SmileOutlined v-if="!copied" key="copy-icon" />
			<SmileFilled v-else key="copied-icon" />
		</template>
		<template #copyableTooltip="{ copied }">
			<span v-if="!copied" key="copy-tooltip">click here</span>
			<span v-else key="copied-tooltip">you clicked!!</span>
		</template>
	</a-typography-paragraph>
	<a-typography-paragraph :copyable="{ tooltip: false }">
		Hide Copy tooltips.
	</a-typography-paragraph> -->
</div>
</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		blockContent: 'AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。',
		ellipsis: true,
		
		editableStr: '这是一个可编辑的文本。',
		customIconStr: '自定义编辑图标并替换工具提示文本。99',
		hideTooltipStr: '隐藏“编辑”工具提示。',
		lengthLimitedStr: '这是一个长度有限的可编辑文本。',
		clickTriggerStr: '文本或图标作为触发器-单击开始编辑。',
		customEnterIconStr: '在编辑字段中具有自定义输入图标的可编辑文本。',
		noEnterIconStr: '可编辑文本，在编辑字段中没有输入图标。',
		
		stateToRadio: 'icon',
		chooseTrigger: ['icon'],
	}
},
computed:{
	ret_ellipsis(){
		if(this.ellipsis){
			return {
				tooltip: 'I am ellipsis now!22'
			};
		}else{
			return false;
		}
	},
	ret_editable(){
		return {
			// tooltip: true,
			triggerType: ['text','icon'],
			onCancel: this.editOnCancel(),
			onChange: this.editOnChange(),
			onEnd: this.editOnEnd(),
			onStart: this.editOnStart(),
			
		};
	},
	
	
	
},
methods:{
	
	editOnCancel(){
		console.log("一直执行editOnCancel");
		console.log("editableStr：" + this.editableStr);
	},
	editOnChange(){
		this.message = "欢迎来到HTML中文网。";
		console.log("这里开始就执行一下999");
	},
	editOnEnd(){
		console.log("editOnEnd");
	},
	editOnStart(){
		console.log("editOnStart");
	},
	
	radioToState(){
		if(this.stateToRadio == 'text'){
			this.chooseTrigger = ['text'];
		}else if(this.stateToRadio == 'icon'){
			this.chooseTrigger = ['icon'];
		}else{
			this.chooseTrigger = ['text', 'icon'];
		}
		// console.log(this.stateToRadio);
		// console.log(this.chooseTrigger);
	},
	
	
},

}

const app = Vue.createApp(Main);
app.use(antd);
let vm = app.mount("#app");


</script>
</html>

